<template>
  <view class="goods_item">
    <view class="goods_left">
      <radio
        @click="radioClickHandler"
        color="#c00000"
        class="goods_ratio"
        v-if="showRadios"
        :checked="goods.goods_state"
      ></radio>

      <view class="goods_img">
        <image
          :src="goods.goods_small_logo || defatulSrc"
          mode="widthFix"
        ></image>
      </view>
    </view>

    <view class="goods_right">
      <view class="goods_info">
        {{ goods.goods_name }}
      </view>

      <view class="goods_info_box">
        <view class="goods_price"> ￥ {{ goods.goods_price | tofiexd }} </view>
        <uni-number-box @change="changeNumHandler" v-if="showRadios" min="1" :value="goods.goods_count" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "my-goods",
  props: {
    goods: {
      type: Object,
      default: {},
    },
    showRadios: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      defatulSrc: "/src/static/logo.png",
    };
  },
  filters: {
    tofiexd(num) {
      return Number(num).toFixed(2);
    },
  },
  computed: {},
  methods: {
    // 改变勾选状态
    radioClickHandler() {
      this.$emit("change-radio", this.goods.goods_id);
    },
    // 改变商品数量
    changeNumHandler(value){
      this.$emit('change-num', {goods_id:this.goods.goods_id, goods_count: value + 0})
    }
  },
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted() {},
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
};
</script>

<style scoped lang="scss">
.goods_item {
  width: 750rpx;
  box-sizing: border-box;
  padding: 5px;
  display: flex;
  border-bottom: 1px solid #efefef;
  justify-content: space-between;

  .goods_left {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 5px;
    .goods_ratio {
      width: 25px;
      height: 25px;
    }

    .goods_img {
      width: 100px;
      padding: 0 5px;
      height: 100px;
      image {
        width: 100px;
      }
    }
  }

  .goods_right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .goods_info {
      font-size: 13px;
    }

    .goods_info_box{
      display: flex;
      justify-content: space-between;
    }
    .goods_price {
      font-size: 16px;
      color: #c00000;

    }
  }
}
</style>